<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>财务报销</el-breadcrumb-item>
        <el-breadcrumb-item>现金报销</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <div class="flow-tab-box">
          <el-button
            v-if="btnAdd"
            slot="label"
            type="success"
            size="medium"
            icon="el-icon-document-add"
            @click="goAddTRouter(0)"
          >个人发起流程</el-button>
          <el-button
            v-if="btnBatch"
            slot="label"
            type="success"
            size="medium"
            icon="el-icon-document-add"
            @click="goAddTRouter(1)"
          >部门发起流程</el-button>
          <span :class="[btnAdd,btnBatch].indexOf(true) === -1 ? 'noUpcome' : 'upcome'" v-if="upComeNum">{{upComeNum}}</span>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="我的申请" name="first">
              <my-apply :tabCode="activeName" :flowType="flowType"></my-apply>
            </el-tab-pane>
            <el-tab-pane label="我的待办" name="second">
              <my-upcoming :tabCode="activeName" :flowType="flowType" @upcomefun="upComeFun"></my-upcoming>
            </el-tab-pane>
            <el-tab-pane label="我的已办" name="third">
              <my-done :tabCode="activeName" :flowType="flowType"></my-done>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 我的申请
import myApply from '../../myApply/index.vue';
// 我的待办
import myUpcoming from '../../myUpcoming/index.vue';
// 我的已办
import myDone from '../../myDone/index.vue';
export default {
  // 注册组件
  components: {
    myApply,
    myUpcoming,
    myDone
  },
  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },
  // 无白屏刷新方法注入
  inject: ['reload'],
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    }
  },
  data () {
    return {
      // 当前流程类型
      flowType: 'XJBXLC-HF-',
      activeName: 'first',
      upComeNum: 0,
      btnBatch: true,
      btnAdd: true
    };
  },
  methods: {
    // 按钮级授权
    authorization (data) {
      for (let i in data) {
        if (data['batch'] === 0) {
          this.btnBatch = false;
        }
        if (data['add'] === 0) {
          this.btnAdd = false;
        }
        return i;
      }
    },
    // tab切
    handleClick (tab) {
      let _this = this;
      _this.activeName = tab.name;
    },
    // 跳转到添加差旅路程页面
    goAddTRouter (addFlag) {
      let _this = this;
      let params = {
        compId: '',
        flowType: ''
      };
      this.$http.raw('api/findAllFlow', params).then(res => {
        let {code, datas} = res;
        if (code === 0) {
          datas.map(item => {
            if (item.flowId === _this.flowType) {
              this.$router.push({
                path: item.formRouter,
                query: {
                  node: 0,
                  datas: item,
                  addFlag: addFlag
                }
              });
            }
          });
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },
    upComeFun (val) {
      this.upComeNum = val;
    }
  },
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
<style lang="scss">
  .flow-tab-box {
    .el-tabs__header {
      border-bottom: 2px solid #E4E7ED;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
      border-bottom: 1px solid #e4e7ed;
    }
    .el-tabs__nav {
      float: right;
    }
    .upcome{
      display: inline-block;
      border-radius: 50%;
      background-color: red;
      color: #fff;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      position: absolute;
      top: 50px;
      right: 110px;
    }
    .noUpcome{
      display: inline-block;
      border-radius: 50%;
      background-color: red;
      color: #fff;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      position: absolute;
      top: 15px;
      right: 110px;
    }
  }
</style>
